<style scoped>
    .site-brand {
        width: 100%;
    }

    .title-container {
        margin: auto;
    }

    .title-img {
        height: 24px;
        line-height: 32px;
        margin: auto 3px;
    }

    .brand-container {
        width: 100%;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(2, 50%);
        grid-template-rows: auto;
        justify-items: center;
    }

    .brand-img {
        /* width: 570px; */
        width: 80%;
        margin: 20px auto;
    }

    .brand-img img {
        width: 100%;
    }

    a {
        text-decoration: none;
        color: white;
    }

    .brand-title {
        font-size: 36px;
        font-family: "Consolas";
        margin-top: -60px;
        margin-left: 12px;
    }

    @media screen and (max-width: 1199px) {
        .site-brand {
            width: 100%;
            display: flex;
        }

        .title-container {
            margin: auto;
        }

        .brand-container {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

         .brand-img {
            width: 80%;
            margin: 10px auto;
        }
    }
</style>
<template>
    <div class="site-brand">
        <div class="title-container">
            <Divider type="horizontal" orientation="center">
                <h3 style="color: #4D555D">
                    <img src="static/img/decorate/stars.png" alt="stars" class="title-img">
                    聚 / 焦 / 品 / 牌
                    <img src="static/img/decorate/stars.png" alt="stars" class="title-img">
                </h3>
            </Divider>
            <div class="brand-container">
                <Card class="brand-img">
                    <a href="http://you.163.com/item/manufacturer?tagId=1034001&_stat_area=mod_manufacturer_14&_stat_referer=tagList"
                       target="_blank">
                        <img src="static/img/brand/brand-1.jpg" alt="brand">
                        <h1 class="brand-title">Alexander</h1>
                    </a>
                </Card>
                <Card class="brand-img">
                    <a href="http://you.163.com/item/manufacturer?tagId=1008000&_stat_area=mod_manufacturer_16&_stat_referer=tagList"
                       target="_blank">
                        <img src="static/img/brand/brand-8.jpg" alt="brand">
                        <h1 class="brand-title">WPC</h1>
                    </a>
                </Card>
                <Card class="brand-img">
                    <a href="http://you.163.com/item/manufacturer?tagId=1001037&_stat_area=mod_manufacturer_3&_stat_referer=tagList"
                       target="_blank">
                        <img src="static/img/brand/brand-3.png" alt="brand">
                        <h1 class="brand-title">新秀丽</h1>
                    </a>
                </Card>
                <Card class="brand-img">
                    <a href="http://you.163.com/item/manufacturer?tagId=1001000&_stat_area=mod_manufacturer_8&_stat_referer=tagList"
                       target="_blank">
                        <img src="static/img/brand/brand-4.jpg" alt="brand">
                        <h1 class="brand-title">MUJI</h1>
                    </a>
                </Card>
                <Card class="brand-img">
                    <a href="http://you.163.com/item/manufacturer?tagId=1046000&_stat_area=mod_manufacturer_12&_stat_referer=tagList"
                       target="_blank">
                        <img src="static/img/brand/brand-5.jpg" alt="brand">
                        <h1 class="brand-title">Police</h1>
                    </a>
                </Card>
                <Card class="brand-img">
                    <a href="http://you.163.com/item/manufacturer?tagId=1016002&_stat_area=mod_manufacturer_10&_stat_referer=tagList"
                       target="_blank">
                        <img src="static/img/brand/brand-7.jpg" alt="brand">
                        <h1 class="brand-title">HUGO BOSS</h1>
                    </a>
                </Card>
                <Card class="brand-img">
                    <a href="http://you.163.com/item/manufacturer?tagId=1001012&_stat_area=mod_manufacturer_15&_stat_referer=tagList"
                       target="_blank">
                        <img src="static/img/brand/brand-15.jpg" alt="brand">
                        <h1 class="brand-title">Wedgwood</h1>
                    </a>
                </Card>
                <Card class="brand-img">
                    <a href="http://you.163.com/item/manufacturer?tagId=1052006&_stat_area=mod_manufacturer_19&_stat_referer=tagList"
                       target="_blank">
                        <img src="static/img/brand/brand-13.jpg" alt="brand">
                        <h1 class="brand-title">Francfranc</h1>
                    </a>
                </Card>
            </div>
        </div>
    </div>
</template>
<script>
    export default {};
</script>
